import React, { memo } from "react";
import { AddCircleOutline, RightOutline } from "antd-mobile-icons";
import { Toast } from "react-vant";
import style from "./index.module.scss";
import { Arrow } from "@react-vant/icons";
import { Tabs } from "react-vant";
import { Empty } from "react-vant";
const Index: React.FC = memo(() => {
  return (
    <div>
      <div className={style.grey}>
        <div className={style.box}>
          <p>
            <AddCircleOutline />
            &nbsp; 新建档案
          </p>
        </div>
      </div>
      <div className={style.card}>
        <div className={style.triangle}></div>
        <div className={style.box}>
          <div className={style.bac} onClick={() => Toast.info("暂未选择档案")}>
            <h4 className={style.h4}>
              <span>体重</span>
              <span className={style.jt}>
                <RightOutline />
              </span>
            </h4>
            <h4>0</h4>
            <p>保持健康，从管理体重开始</p>
          </div>
        </div>
        <div className={style.box}>
          <div className={style.bac} onClick={() => Toast.info("暂未选择档案")}>
            <h4 className={style.h4}>
              <span>运动</span>
              <span className={style.jt}>
                <RightOutline />
              </span>
            </h4>
            <h4>0</h4>
            <p>每日锻炼半小时，助益身心</p>
          </div>
        </div>
        <div className={style.box}>
          <div className={style.bac} onClick={() => Toast.info("暂未选择档案")}>
            <h4 className={style.h4}>
              <span>血糖</span>
              <span className={style.jt}>
                <RightOutline />
              </span>
            </h4>
            <h4>0</h4>
            <p>规范记录掌握血糖变化规律</p>
          </div>
        </div>
        <div className={style.box}>
          <div className={style.bac} onClick={() => Toast.info("暂未选择档案")}>
            <h4 className={style.h4}>
              <span>血压</span>
              <span className={style.jt}>
                <RightOutline />
              </span>
            </h4>
            <h4>0</h4>
            <p>定时监测利于改善血压控制</p>
          </div>
        </div>
        <div className={style.box}>
          <div className={style.bac} onClick={() => Toast.info("暂未选择档案")}>
            <h4 className={style.h4}>
              <span>心率</span>
              <span className={style.jt}>
                <RightOutline />
              </span>
            </h4>
            <h4>0</h4>
            <p>监测心率，关注心脏健康</p>
          </div>
        </div>
        <div className={style.box}>
          <div className={style.bac} onClick={() => Toast.info("暂未选择档案")}>
            <h4 className={style.h4}>
              <span>睡眠</span>
              <span className={style.jt}>
                <RightOutline />
              </span>
            </h4>
            <h4>0</h4>
            <p>睡眠7小时，保持充沛精力</p>
          </div>
        </div>

        <div className={style.bang}>
          <div className={style.zhin}>
            <span className={style.zhin1}>绑定智能设备，自动上传数据</span>
          </div>
          <div className={style.zhineng1}>
            <span className={style.zhineng2}>
              去绑定
              <Arrow />
            </span>
          </div>
        </div>
      </div>

      <div className={style.tabsh}>
        <Tabs>
          <Tabs.TabPane title={`电子病历夹`}>
            <div className={style.tp}>
              <img className={style.tp1} src="./img/kk.png" alt="" />
            </div>
            <div className={style.tp2}>
              <button
                onClick={() => Toast.info("暂未选择档案")}
                className={style.bt}
              >
                <span style={{ color: "#39d167" }}>+新建病历夹</span>
              </button>
            </div>
          </Tabs.TabPane>
          <Tabs.TabPane title={`体检报告`}>
            <div>
              <Empty description="暂无体检报告" />;
            </div>
          </Tabs.TabPane>
          <Tabs.TabPane title={`咨询记录`}>
            <Empty description="暂无咨询记录" />;
          </Tabs.TabPane>
          <Tabs.TabPane title={`会员服务`}>
            <Empty description="您未开通会员服务" />;
          </Tabs.TabPane>
        </Tabs>
      </div>
    </div>
  );
});

export default Index;
